import React, { useState, useRef, useEffect } from 'react';
import { SendOutlined } from '@ant-design/icons';
import './InputArea.css';

const InputArea = ({ onSend, disabled, placeholder }) => {
    const [inputValue, setInputValue] = useState('');
    const textareaRef = useRef(null);

    const handleSubmit = () => {
        if (inputValue.trim() && !disabled) {
            onSend(inputValue.trim());
            setInputValue('');
            // 重置textarea高度
            if (textareaRef.current) {
                textareaRef.current.style.height = 'auto';
            }
        }
    };

    const handleKeyDown = (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            handleSubmit();
        }
    };

    const handleInputChange = (e) => {
        setInputValue(e.target.value);
        
        // 自动调整textarea高度
        const textarea = e.target;
        textarea.style.height = 'auto';
        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
    };

    // 聚焦输入框
    useEffect(() => {
        if (!disabled && textareaRef.current) {
            textareaRef.current.focus();
        }
    }, [disabled]);

    return (
        <div className="input-area">
            <div className="input-container">
                <textarea
                    ref={textareaRef}
                    className="message-input"
                    value={inputValue}
                    onChange={handleInputChange}
                    onKeyDown={handleKeyDown}
                    placeholder={placeholder || "请输入消息... (Enter发送，Shift+Enter换行)"}
                    disabled={disabled}
                    rows={1}
                />
                <button
                    className={`send-button ${inputValue.trim() && !disabled ? 'active' : ''}`}
                    onClick={handleSubmit}
                    disabled={!inputValue.trim() || disabled}
                    title="发送消息"
                >
                    <SendOutlined />
                </button>
            </div>
            
            {disabled && (
                <div className="input-status">
                    正在生成中，请稍候...
                </div>
            )}
        </div>
    );
};

export default InputArea;
